<template>
	<view class="index">
		<!-- 顶部广告图 -->
		<view class="banner-box" @click="handleJump">
			<image class="banner-img" mode="widthFix" :show-menu-by-longpress="true" src="https://api.jxchzj.cn/upload/diaocha.png"></image>
		</view>

		<!-- 广告下方跳转按钮 -->
		<view class="cta-box">
			<button class="cta-btn" type="primary" @click="handleJump"> 提交问卷调查 </button>
		</view>

		<!-- 联系方式与在线客服 -->
		<view class="contact-box">
			<view class="contact-title">联系方式与客服</view>
			<view class="contact-actions">
				<button class="contact-btn phone" @click="handleQuickCall">
					<image class="btn-icon" mode="widthFix" src="https://api.jxchzj.cn/upload/dianhua.png"></image>
					<text class="btn-text">拨打电话</text>
				</button>
				<button class="contact-btn kefu"  open-type="contact">
					<image class="btn-icon" mode="widthFix" src="https://api.jxchzj.cn/upload/kefu.png"></image>
					<text class="btn-text">在线客服</text>
				</button>
			</view>
		</view>

		<!-- 地址信息 -->
		<view class="address-box">
			<view class="address-title">地址信息</view>
			<view class="address-content">{{ address }}</view>
		</view>

		<!-- 快捷拨号图片行 -->
		<view class="quick-call-box">
			<view class="quick-call-item">
				<image v-if="showdata" class="quick-call-img" mode="aspectFill" src="https://api.jxchzj.cn/upload/1.jpg"></image>
				<button class="contact-merchant-btn" @click="showMerchantQR(1)">联系商家</button>
			</view>
			<view class="quick-call-item">
				<image v-if="showdata" class="quick-call-img" mode="aspectFill" src="https://api.jxchzj.cn/upload/2.jpg"></image>
				<button class="contact-merchant-btn" @click="showMerchantQR(2)">联系商家</button>
			</view>
			<view class="quick-call-item">
				<image v-if="showdata" class="quick-call-img" mode="aspectFill" src="https://api.jxchzj.cn/upload/3.jpg"></image>
				<button class="contact-merchant-btn" @click="showMerchantQR(3)">联系商家</button>
			</view>
		</view>

		<!-- 商家二维码弹窗 -->
		<uni-popup ref="merchantPopup" type="center" :mask-click="true">
			<view class="merchant-popup">
				<view class="popup-header">
					<text class="popup-title">联系商家</text>
					<text class="popup-close" @click="closeMerchantQR">×</text>
				</view>
				<view class="popup-content">
					<image class="qr-code-img" mode="aspectFit" :src="currentQRCode" @longpress="previewQRCode"></image>
					<text class="qr-tip">长按二维码扫一扫</text>
				</view>
			</view>
		</uni-popup>

		<!-- 大转盘抽奖 -->
		<!-- <view class="lottery-box">
			<image @click="chou" class="lottery-img" :show-menu-by-longpress="true" src="https://api.jxchzj.cn/upload/12dedd473def436429ba757798645cf.jpg"></image>
			<view class="lottery-tip">大转盘抽奖</view>
		</view> -->

	</view>
</template>
<script>

import { chek } from '@/api/user';
export default {
	name: 'Index',
	components: {
		// 导入uni-popup组件
	},
	props: {},
	data: function() {
		return {
			showdata:false,
			shownodata:false,
			statusBarHeight: 0,
			jumpUrl: '/pages/order/MyOrder/diaocha',
			address: '江西省南昌市红谷滩新区学府大道 88 号',
			phoneOptions: ['186-0791-4995', '171-0802-9999'],
			currentQRCode: '',
			merchantQRMap: {
				1: 'https://api.jxchzj.cn/upload/chat1.jpg',
				2: 'https://api.jxchzj.cn/upload/chat2.jpg', 
				3: 'https://api.jxchzj.cn/upload/chat3.jpg'
			}
		};
	},
	computed: {

	},	
	onShow(){
			// this.$forceUpdate();
	},
	  onPullDownRefresh () {
		  // this.getfriends()
		  
	  },
	onLoad: function(options) {
		chek().then(res=>{
			this.showdata = res.data;
			this.shownodata = !this.showdata;
		})
		
		
	},
	onShareAppMessage: function() {
		 return {
		 	title: this.miniHomeRemark,
		 	imageUrl: this.miniHomeImg,
		 	 path: '/pages/order/MyOrder/index'
		 };
		
	},
	onShareTimeline: function() {
		return {
			title: this.miniHomeRemark,
			imageUrl: this.miniHomeImg,
			path: '/pages/order/MyOrder/index'
		};
	},
	methods: {
		handleJump(){
			// 优先尝试切换到 Tab 页面，失败则普通跳转
			uni.switchTab({
				url: this.jumpUrl,
				fail: () => {
					uni.navigateTo({ url: this.jumpUrl });
				}
			});
		},
		handleQuickCall(){
			const list = (this.phoneOptions || []).filter(Boolean);
			if(!list.length){
				uni.showToast({ title: '暂无可拨打号码', icon: 'none' });
				return;
			}
			uni.showActionSheet({
				itemList: list,
				success: (res) => {
					const idx = res.tapIndex;
					const raw = list[idx] || '';
					const phone = raw.replace(/[^0-9]/g, '');
					if(!phone){
						uni.showToast({ title: '号码无效', icon: 'none' });
						return;
					}
					uni.makePhoneCall({ phoneNumber: phone });
				}
			});
		},
		chou(){
			uni.navigateToMiniProgram({
			  appId: 'wxf2facde6bc30607b',
			  path: 'lottery/jackpot/detail?id=122010',
			  success(res) {
			    // open successfully
			  }
			})
		},
		show(){
			 this.$refs.popup.open('top')
		}
		,showCode(idx){
			// 不同图片对应不同外部链接
			const urlMap = {
				1: 'https://api.jxchzj.cn/one.html',
				2: 'https://api.jxchzj.cn/two.html',
				3: 'https://api.jxchzj.cn/three.html'
			};
			const link = urlMap[idx] || urlMap[1];
			const enc = encodeURIComponent(link);
			uni.navigateTo({ url: `/pages/webview/index?url=${enc}` });
		},
		
		// 显示商家二维码
		showMerchantQR(idx) {
			if(this.showdata){
				this.currentQRCode = this.merchantQRMap[idx] || this.merchantQRMap[1];
			}else{
				this.currentQRCode = "";
			}
			
			this.$refs.merchantPopup.open();
		},
		
		// 关闭商家二维码弹窗
		closeMerchantQR() {
			this.$refs.merchantPopup.close();
		},
		
		// 预览二维码图片
		previewQRCode() {
			if (this.currentQRCode) {
				uni.previewImage({
					urls: [this.currentQRCode],
					current: this.currentQRCode
				});
			}
		}
	},
	created: async function() {
		// await this.doColorThief();
	}
};
</script>
<style scoped lang="less">
.index{
	padding-left: 25rpx;
	padding-right: 25rpx;
    padding-bottom: 40rpx;
    background-color: #f7f8fa;
}
.banner-box{
	margin-top: 40rpx;
	width: 100%;
}
.banner-img{
	width: 100%;
	border-radius: 20rpx;
	box-shadow: 0 10rpx 24rpx rgba(0,0,0,0.06);
}
.cta-box{
	margin-top: 30rpx;
	display: flex;
	justify-content: center;
}
.cta-btn{
	width: 70%;
	height: 84rpx;
	line-height: 84rpx;
	border-radius: 50rpx;
	background: linear-gradient(90deg, #ff7a45 0%, #ff4d4f 100%);
	color: #ffffff;
	font-size: 30rpx;
	box-shadow: 0 8rpx 20rpx rgba(255,77,79,0.35);
}
.contact-box{
	margin-top: 40rpx;
	background-color: #fff;
	border-radius: 20rpx;
	padding: 24rpx;
	box-shadow: 0 8rpx 22rpx rgba(0,0,0,0.05);
}
.contact-title{
	font-size: 32rpx;
	font-weight: bold;
	margin-bottom: 20rpx;
}
.contact-actions{
	display: flex;
	gap: 20rpx;
	flex-wrap: wrap;
}
.contact-btn{
	flex: 1;
	min-width: 260rpx;
	height: 80rpx;
	line-height: 80rpx;
	border-radius: 16rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(90deg, #6aa1ff 0%, #1677ff 100%);
	color: #fff;
	font-size: 28rpx;
	box-shadow: 0 6rpx 18rpx rgba(22,119,255,0.25);
}
.contact-btn.phone{ background: linear-gradient(90deg, #34d399 0%, #10b981 100%); box-shadow: 0 6rpx 18rpx rgba(16,185,129,0.25); }
.contact-btn.kefu{ background: linear-gradient(90deg, #a78bfa 0%, #6366f1 100%); box-shadow: 0 6rpx 18rpx rgba(99,102,241,0.25); }
.btn-icon{ width: 40rpx; height: 40rpx; margin-right: 14rpx; }
.btn-text{ font-size: 28rpx; }
.address-box{
	margin-top: 24rpx;
	background-color: #fff;
	border-radius: 20rpx;
	padding: 24rpx;
	box-shadow: 0 8rpx 22rpx rgba(0,0,0,0.05);
}
.address-title{
	font-size: 28rpx;
	color: #666;
	margin-bottom: 12rpx;
}
.address-content{
	font-size: 30rpx;
	color: #111;
}
.lottery-box{
	margin-top: 48rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
    background-color: #fff;
    border-radius: 24rpx;
    padding: 30rpx 24rpx;
    box-shadow: 0 10rpx 24rpx rgba(0,0,0,0.05);
}
.lottery-img{
	width: 360rpx;
	height: 360rpx;
	border-radius: 360rpx;
	box-shadow: 0 10rpx 24rpx rgba(255,178,25,0.35);
}
.lottery-tip{
	margin-top: 16rpx;
	color: #000000;
	font-size: 30rpx;
}
.selDeviceBtn{
	margin-top: 15rpx;
	width: 100%;
	color: #fff;
	border-radius: 15rpx;
	background-color: #3aa3ff;
}

.home_content_box {
	margin-top: 34rpx;
	    display: grid;
	    justify-items: center;
		gap: 20rpx;
}

.BanContain {

	width: 100%;
	top: 0;
	z-index: 1000;
}


.icon{
	width:50rpx;
	height: 50rpx;
}
.title{
	    font-size: 45rpx;
	    font-weight: bold;
	    width: 100%;
	    padding-left: 25rpx;
}
.code{
	    width: 100%;
	    padding: 25rpx;
	    // height: 600rpx;
	    background-color: #fff;
		border-radius: 25rpx;
		flex-direction: column;
		display: flex;
		    justify-content: center;
		    align-items: center;
		    align-content: center;
}
.myfriend{
	
	width: 100%;
	background-color: #fff;
	border-radius: 20rpx;
	padding: 20rpx;
}

.allSort{
	background-color: #fff;
	border-radius: 10rpx;
	padding: 15rpx;
	gap:15rpx;
	height: 50vh;
	.item{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
}
.item-img{
	width: 60rpx;
	height: 60rpx;
	border-radius: 20rpx;
}

.shareButton{
	line-height: normal;
	border-radius: 20rpx;
	 display: flex;
	 flex-direction: column;
	 align-items: center;
	     position: fixed;
	     bottom: 28rpx;
	     width: 701rpx;
	     height: 94px;
	     justify-content: center;
	     background-color: #ffb219;
}
.popup-kefu{
	padding: 24rpx;
	background-color: #fff;
	border-radius: 20rpx;
	align-items: center;
	justify-content: center;
}
.kefu-img{
	width: 400rpx;
	height: 400rpx;
}
.kefu-tip{
	text-align: center;
	margin-top: 12rpx;
}

/* 快捷拨号图片样式 */
.quick-call-box{
	margin-top: 24rpx;
	display: flex;
	gap: 20rpx;
}
.quick-call-item{
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 12rpx;
}
.quick-call-img{
	width: 100%;
	height: 180rpx;
	border-radius: 16rpx;
	background-color: #ffffff;
	object-fit: cover;
	box-shadow: 0 8rpx 22rpx rgba(0,0,0,0.05);
}
.contact-merchant-btn{
	width: 100%;
	height: 60rpx;
	line-height: 60rpx;
	border-radius: 12rpx;
	background: linear-gradient(90deg, #ff7a45 0%, #ff4d4f 100%);
	color: #ffffff;
	font-size: 24rpx;
	border: none;
	box-shadow: 0 4rpx 12rpx rgba(255,77,79,0.3);
	transition: all 0.3s ease;
}

.contact-merchant-btn:active{
	transform: scale(0.95);
	box-shadow: 0 2rpx 8rpx rgba(255,77,79,0.4);
}

/* 商家二维码弹窗样式 */
.merchant-popup{
	background-color: #ffffff;
	border-radius: 20rpx;
	width: 600rpx;
	overflow: hidden;
	box-shadow: 0 20rpx 60rpx rgba(0,0,0,0.2);
	animation: popupSlideIn 0.3s ease-out;
}

@keyframes popupSlideIn {
	from {
		opacity: 0;
		transform: scale(0.8) translateY(20rpx);
	}
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}
.popup-header{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx 30rpx 20rpx;
	border-bottom: 1rpx solid #f0f0f0;
}
.popup-title{
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}
.popup-close{
	font-size: 40rpx;
	color: #999;
	line-height: 1;
	cursor: pointer;
}
.popup-content{
	padding: 40rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20rpx;
}
.qr-code-img{
	width: 300rpx;
	height: 300rpx;
	border-radius: 16rpx;
	background-color: #f5f5f5;
	border: 2rpx solid #e0e0e0;
	box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.1);
}
.qr-tip{
	font-size: 26rpx;
	color: #666;
	text-align: center;
}
</style>
